<template>
  <FullPageModal
    :title="t('aiot.user.userDetail')"
    :custom-footer="true"
    :body-style="{ padding: 0 }"
    :has-footer="false"
    :footer="null"
    @ok="ok"
    @cancel="cancel"
    @open="open"
  >
    <div v-if="record" class="flex flex-row h-full">
      <div class="w-108 p-7">
        <div class="text-center">
          <a-avatar :size="56" :src="UserLog"> </a-avatar>
          <div class="my-2">{{ record.nickName }}</div>
          <div v-if="record.roles">
            <span
              v-for="el in roleArr"
              :key="el"
              class="
                inline-block
                rounded-2xl
                leading-7
                px-3.5
                bg-color-active bg-opacity-10
                text-color-active text-sm
                mr-2
                mb-2
              "
            >
              {{ el }}
            </span>
          </div>
        </div>
        <div class="pt-5 pb-4.5 flex flex-row items-center border-0 border-b border-solid border-color-split">
          <div class="flex-1 text-xl text-color-header font-semibold">
            {{ t("aiot.user.userInfo") }}
          </div>
          <div>
            <!-- <a-button size="small" @click="$emit('updateInfo', record)">{{ t("common.edit") }}</a-button> -->
            <PermissionBtn
              :btn-props="{ size: 'small' }"
              :permission-code="PermissionCode.USER_UPDATE"
              @click="$emit('updateInfo', record)"
            >
              {{ t("common.edit") }}
            </PermissionBtn>
          </div>
        </div>
        <div class="pt-7">
          <a-descriptions :title="t('common.baseInfo')" :label-style="{ width: '130px' }" :column="1" :colon="false">
            <a-descriptions-item :label="t('common.cellphone')">{{ record.phone }}</a-descriptions-item>
            <a-descriptions-item :label="t('common.status')">
              <a-tag class="sl-tag !mr-2" :color="record.isActivated ? 'green' : 'red'">
                {{ record.isActivated ? t("aiot.user.active") : t("aiot.user.unActive") }}
              </a-tag>
              <a-tag class="sl-tag" :color="record.isLocked ? 'red' : 'green'">
                {{ record.isLocked ? t("common.disable") : t("common.enable") }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item :label="t('common.department')">{{ record.organizations }}</a-descriptions-item>
            <a-descriptions-item :label="t('common.sex')">
              {{ getLabelByValueFromEnum((record.gender || Gender.secrecy) as string, Gender, "gender") }}
            </a-descriptions-item>
            <a-descriptions-item :label="t('common.mail')">
              {{ record.companyEmail || "--" }}
            </a-descriptions-item>
            <a-descriptions-item :label="t('aiot.tenant.region')">
              {{ record.region || "--" }}
            </a-descriptions-item>
            <a-descriptions-item :label="t('common.address')">
              {{ record.location || "--" }}
            </a-descriptions-item>
            <a-descriptions-item :label="t('common.simpleDes')">
              {{ record.description || "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="flex-1 border-0 border-l border-solid border-color-split my-7 px-7">
        <a-tabs v-model:activeKey="activeKey" :tab-bar-style="{ margin: 0 }" class="sl-tabs-fit">
          <a-tab-pane key="0" :tab="t('aiot.role.functionAuth')" class="py-4.5">
            <a-spin :spinning="loading">
              <SelectApps v-model:value="curUserApps" class="mb-4.5" :disabled="true"></SelectApps>
              <AuthList :server-value="permissions" :is-admin="isAdmin" />
            </a-spin>
          </a-tab-pane>
          <!-- <a-tab-pane key="1" :tab="t('aiot.user.projectAuth')">Content of Tab Pane 2</a-tab-pane>
          <a-tab-pane key="2" :tab="t('aiot.user.deviceAuth')">Content of Tab Pane 3</a-tab-pane> -->
        </a-tabs>
      </div>
    </div>
  </FullPageModal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import FullPageModal from "/@/components/FullPageModal.vue";
import { Gender, UserItem } from "/@/api/aiot/user/models";
import { computed, ref } from "vue";
import { getLabelByValueFromEnum } from "/@/utils/common";
import type { RoleFunctionMenuItem } from "/@/api/aiot/role/models";
import PermissionBtn from "/@/components/PermissionBtn.vue";
import { PermissionCode } from "/@/api/permissionCode";
import UserLog from "/@/assets/user-logo.svg";
import { getRoleById } from "/@/api/aiot/role";
import { AiotSubApp, getAiotSubAppData } from "/@/base/data";
import { useUserStore } from "/@/stores/aiot/user";

const props = defineProps<{
  record?: UserItem;
}>();

const userStore = useUserStore();
const { t } = useI18n();
const emits = defineEmits(["update:visible", "updateInfo", "updateFuncAuth"]);
const roleArr = computed(() => {
  if (props.record && props.record.roles) {
    return (props.record.roles as string).split(",");
  }
  return [];
});
const isAdmin = ref(false);
const curUserApps = ref<AiotSubApp[]>([]);
const permissions = ref<RoleFunctionMenuItem[]>([]);
const loading = ref(false);
async function open(isFirstOpen) {
  if (!props.record) return;
  if (props.record.roleId) {
    isAdmin.value = userStore.isAdminType(props.record.roleTypes);
    if (isAdmin.value) {
      curUserApps.value = getAiotSubAppData().map((el) => el.value);
    } else {
      loading.value = true;
      const roleItem = await getRoleById(props.record.roleId as string, false);
      loading.value = false;
      if (roleItem) {
        curUserApps.value = roleItem.applicationPermissions || [];
        if (roleItem.rolePermissions) {
          const value = JSON.parse(roleItem.rolePermissions) as RoleFunctionMenuItem[];
          permissions.value = value;
        }
      }
    }
  } else {
    curUserApps.value = [];
    permissions.value = [];
  }

  if (isFirstOpen) {
    //第一次打开 加载数据
  } else {
    //之后每次打开 重置
  }
}
function ok() {}
function cancel() {
  emits("update:visible", false);
}

const activeKey = ref("0");
</script>
